{extend name="v1/layout/base"}
{block name="content"}
<div class="layuimini-main">

  <fieldset class="table-search-fieldset xk-search-status" id="xk-search-status">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card-body layui-form layui-form-pane">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg12">
                <label class="layui-form-label">搜索关键词</label>
                <div class="layui-input-block">
                  <input type="text" name="keywords" placeholder="请输入搜索关键词" id="keywords" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-row">
              <div class="layui-col-xs4">&nbsp;</div>
              <div class="layui-col-xs4">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius close-search"><i class="layui-icon">&#x1007;</i>关闭</button>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-radius xk-dosearch">搜索<i class="layui-icon"></i></button>
              </div>
              <div class="layui-col-xs4">&nbsp;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>

  <script type="text/html" id="toolbar">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-black  layui-btn-sm" lay-event="reseve"><i class="layui-icon">&#xe63d;</i></button>
      <button class="layui-btn layui-btn-normal  layui-btn-sm" lay-event="add" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Artice/Create/cate_id/{$cate_id}"><i class="layui-icon">&#xe654;</i>添加热点</button>
      <button class="layui-btn layui-btn-warm  layui-btn-sm" lay-event="showStatus" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Artice/ChanageValue"><i class="layui-icon layui-icon-praise"></i>启用选中</button>
      <button class="layui-btn layui-btn-warm  layui-btn-sm" lay-event="hideStatus" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Artice/ChanageValue"><i class="layui-icon layui-icon-tread"></i>停用选中</button>
      <button class="layui-btn layui-btn-danger  layui-btn-sm" lay-event="delete" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Artice/Destroy"><i class="layui-icon">&#xe640;</i>删除选中</button>
    </div>
  </script>

  <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

  <script type="text/html" id="currentTableBar">
    <button class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" lay-event="show" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Artice/Edit"><i class="layui-icon">&#xe642;</i>修改</button>
    <button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" lay-event="delete" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/Artice/Destroy"><i class="layui-icon">&#xe640;</i>删除</button>
  </script>
  <!-- 状态按钮 -->
  <script type="text/html" id="status">
    <input type="checkbox" lay-filter="status" value="{{d.artice_id}}" name="status" lay-skin="switch" lay-text="启用|不启用" {{d.status==1?'checked':''}} />
  </script>
  <!-- 图片 如果存在的话 -->
  <script type="text/html" id="picurlshow">
    <img src="{{d.picurl?d.picurl:'__COMMON__images/no_pic.png'}}" style="width:60px; height:100%" />
  </script>
</div>
{/block}
{block name="myScript"}
<style media="screen">
  .layui-table-cell {
    height: 60px;
    line-height: 60px;
  }
</style>
<script>
  layui.use(['form', 'table'], function() {
    var $ = layui.jquery,
      form = layui.form,
      cate_id = '{$cate_id}',
      table = layui.table;
    table.render({
      elem: '#currentTableId',
      url: '/{:config("manage.manage_name")}/{:config("manage.version")}/Artice/artice',
      toolbar: '#toolbar',
      where: {cate_id: cate_id},
      defaultToolbar: ['filter',{
        title: '搜索',
        layEvent: 'search',
        icon: 'layui-icon-search'
      }],
      cols: [
        [{
            type: "checkbox"
          },
          {
            field: 'artice_id',
            width: '5%',
            title: 'ID',
            sort: true
          },
          {
            field: 'title',
            width: '30%',
            title: '标题',
            edit: 'text'
          },
          {
            field: 'order_id',
            width: '10%',
            title: '排序ID',
            edit: 'number'
          },
          {
            field: 'status',
            title: '是否启用',
            width: '8%',
            templet: "#status"
          },
          {
            field: 'update_time',
            width: '12%',
            title: '最后更新时间'
          },
          {
            title: '操作',
            toolbar: '#currentTableBar',
            align: "center"
          }
        ]
      ],
      limits: [30, 150, 200, 250, 500, 1000],
      limit: 30,
      id: 'table_ids',
      page: true,
      skin: 'line'
    });

    // 顶部操作工具
    table.on('toolbar(currentTableFilter)', function(obj) {
      var url = $(this).attr('data-url'),
          keywords = $("#keywords").val(),
          cate_id = '{$cate_id}',
          id_arr = getCheckValue();
      switch (obj.event) {
        case 'reseve':
          table.reload('table_ids');
          break;
        case 'add':
          var index = layer.open({
            title: '图文添加',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              table.reload('table_ids', {
                where: {
                  keywords: keywords,
                  cate_id: cate_id,
                }
              });
            }
          });
          break;
        case 'delete':
          if (id_arr) {
            layer.msg('您确定要删除选中的图文吗？', {
              time: 0,
              btn: ['确定', '取消'],
              yes: function(index) {
                layer.close(index);
                https(url, {
                  id_str: id_arr
                }, 'post', true, '正在执行删除').then(res => {
                  if (res.result_code == 200) {
                    table.reload('table_ids', {
                      where: {
                        keywords: keywords,
                        cate_id: cate_id,
                      }
                    });
                  }
                })
              },
              btn2: function(index) {
                layer.close(index);
              }
            });
          } else {
            layer.msg("请选择需要操作的数据", {
              icon: 5,
              time: 1000
            });
          }
          break;
        case 'showStatus':
          if (id_arr) {
            layer.msg('您确定要启用选中的图文吗？', {
              time: 0,
              btn: ['确定', '取消'],
              yes: function(index) {
                layer.close(index);
                https(url, {
                  by_key: id_arr,
                  key: 'status',
                  value: 1
                }, 'post', true, '正在执行启用').then(res => {
                  if (res.result_code == 200) {
                    table.reload('table_ids', {
                      where: {
                        keywords: keywords,
                        cate_id: cate_id
                      }
                    });
                  }
                })
              },
              btn2: function(index) {
                layer.close(index);
              }
            });
          } else {
            layer.msg("请选择需要操作的数据", {
              icon: 5,
              time: 1000
            });
          }
          break;
        case 'hideStatus':

          if (id_arr) {
            layer.msg('您确定要停用选中的图文吗？', {
              time: 0,
              btn: ['确定', '取消'],
              yes: function(index) {
                layer.close(index);
                https(url, {
                  by_key: id_arr,
                  key: 'status',
                  value: 0
                }, 'post', true, '正在执行停用').then(res => {
                  if (res.result_code == 200) {
                    table.reload('table_ids', {
                      where: {
                        keywords: keywords,
                        cate_id: cate_id
                      }
                    });
                  }
                })
              },
              btn2: function(index) {
                layer.close(index);
              }
            });
          } else {
            layer.msg("请选择需要操作的数据", {
              icon: 5,
              time: 1000
            });
          }
          break;
        case 'search':
          $("#xk-search-status").removeClass('xk-search-status');
          break;
      }
    })
    // 列表工具栏目
    table.on('tool(currentTableFilter)', function(obj) {
      var data = obj.data,
        event = obj.event,
        keywords = $("#keywords").val(),
        cate_id = '{$cate_id}',
        url = $(this).attr('data-url');
      url = url + '/artice_id/' + data.artice_id;
      switch (event) {
        case 'show':
          var index = layer.open({
            title: data.title + '编辑',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              table.reload('table_ids', {
                where: {
                  keywords: keywords,
                  cate_id: cate_id
                }
              });
            }
          });
          break;
        case 'delete':
          //确定要删除吗？
          layer.msg('您确定要删除' + obj.data.title + '这个图文吗？', {
            time: 0, //不自动关闭
            btn: ['确定', '取消'],
            yes: function(index) {
              layer.close(index);
              https(url, {
                id_str: obj.data.artice_id
              }, 'post', true, '正在删除').then(res => {
                if (res.result_code == 200) {
                  table.reload('table_ids', {
                    where: {
                      keywords: keywords,
                      cate_id: cate_id
                    }
                  });
                }
              })
            },
            btn2: function(index) {
              layer.close(index);
            }
          });
          break;
      }
    })
    // 监听单元格编辑事件
    table.on('edit(currentTableFilter)', function(obj) {
      var value = obj.value,
        keywords = $('#keywords').val(),
        cate_id = '{$cate_id}',
        by_key = obj.data.artice_id,
        key = obj.field;
      if (value == '') {
        table.reload('table_ids', {
          where: {
            keywords: keywords,
            cate_id: cate_id
          }
        }, 'data');
        return false;
      }
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Artice/ChanageValue')}";
      https(url, {
        by_key: by_key,
        key: key,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          table.reload('table_ids', {
            where: {
              keywords: keywords,
              cate_id: cate_id
            }
          }, 'data');
        }
      })
    });
    form.on('switch(status)', function(obj) {
      if (obj.elem.checked == true) {
        var value = 1;
      } else {
        var value = 0;
      }
      var keywords = $('#keywords').val(),
          cate_id = '{$cate_id}';
      // 动态修改 开始
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Artice/ChanageValue')}";
      https(url, {
        by_key: this.value,
        key: this.name,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          table.reload('table_ids', {
            where: {
              keywords: keywords,
              cate_id:  cate_id
            }
          }, 'data');
        }
      })
    });
    form.on('switch(is_tj)', function(obj) {
      if (obj.elem.checked == true) {
        var value = 1;
      } else {
        var value = 0;
      }
      var keywords = $('#keywords').val(),
          cate_id = '{$cate_id}';
      // 动态修改 开始
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Artice/ChanageValue')}";
      https(url, {
        by_key: this.value,
        key: this.name,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          table.reload('table_ids', {
            where: {
              keywords: keywords,
              cate_id:  cate_id
            }
          }, 'data');
        }
      })
    });
    // 执行搜索
    $(".xk-dosearch").click(function() {
      var keywords = $("#keywords").val(),
          cate_id = '{$cate_id}';
        table.reload('table_ids', {
          page: {
            curr: 1
          },
          where: {
            keywords: keywords,
            cate_id: cate_id
          }
        }, 'data');
    })
    // 获取选中项
    function getCheckValue() {
      var id_arr = [],
        id_str = '';
      var checkStatus = table.checkStatus('table_ids'),
        data = checkStatus.data;
      data.map(function(d) {
        id_arr.push(d.artice_id);
      })
      id_str = id_arr.join(',');
      return id_str;
    }
  });
</script>
{/block}
